<template>
  <z-paging-swiper>
		<!-- 需要固定在顶部不滚动的view放在slot="top"的view中 -->
		<!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
		<template #top>
      <statusBar bgColor="#F4F3F7"></statusBar>
      <!-- 返回栏 -->
      <view class="go-back">
        <image src="../../static/go-back.svg" @click="goBack"/>
        <uni-easyinput 
          prefixIcon="search" 
          v-model="searchVal" 
          placeholder="请输入内容" 
          @iconClick="onSearch"
        ></uni-easyinput>
      </view>
      <z-tabs 
        ref="tabs" 
        :list="tabList" 
        :current="current" 
        @change="tabsChange" 
        :barWidth="'26rpx'" 
        :activeColor="'#16DFF2'" 
        :activeStyle="activeStyle"
        :inactiveStyle="inactiveStyle"
      />
		</template>

		<!-- swiper必须设置height:100%，因为swiper有默认的高度，只有设置高度100%才可以铺满页面  -->
		<swiper class="swiper" :current="current" @transition="swiperTransition" @animationfinish="swiperAnimationfinish">
			<swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
				<!-- 这里的swiper-list-item为demo中为演示用定义的组件，列表及分页代码在swiper-list-item组件内 -->
				<!-- 请注意，swiper-list-item非z-paging内置组件，在自己的项目中必须自己创建，若未创建则会报组件不存在的错误 -->
				<swiperListItem ref="swiperListItemRef" :tabIndex="index" :currentIndex="current" :searchVal="searchVal"></swiperListItem>
			</swiper-item>
		</swiper>
	</z-paging-swiper>
</template>

<script setup>
	import { ref, watch, reactive, onMounted, nextTick } from 'vue';  
  import { onLoad, onShow } from "@dcloudio/uni-app";	
  import swiperListItem from './swiperListItem.vue'

  const swiperListItemRef = ref(null)
  const searchVal = ref('')

  const tabs = ref(null);
	const current = ref(0);
	const tabList = ref(['帖子','用户','商品','品牌','图鉴']);
	const activeStyle = reactive({
    color: '#111111',
    fontSize: '28rpx',
    fontWeight: 500
  })
  const inactiveStyle = reactive({
    color: '#838286',
    fontSize: '28rpx',
    fontWeight: 400
  })

  onLoad(({searchV}) => {
    searchVal.value = searchV
  })

  // tabs通知swiper切换
	const tabsChange = (index) => {
		current.value = index;
	}
	
	// swiper滑动中
	const swiperTransition = (e) => {
		tabs.value.setDx(e.detail.dx);
	}
	
	// swiper滑动结束
	const swiperAnimationfinish = (e) => {
		current.value = e.detail.current;
		tabs.value.unlockDx();
	}


  const goBack = () => {
		uni.navigateBack({ delta: 1 })
	}

  const onSearch = () => {
    console.log('重新搜索',searchVal.value)
    console.log('swiperListItemRef.value',swiperListItemRef.value)
    let arr = uni.getStorageSync('HistoryList') || []
    arr.push(searchVal.value)
    uni.setStorageSync('HistoryList', arr)
    swiperListItemRef.value.forEach(i => {
      i.refresh()
    });
  }

</script>

<style lang="scss" scoped>
  .swiper {
		height: 100%;
	}
  ::v-deep .z-tabs-conatiner{
    height: 76rpx;
    background-color: #F4F3F7 !important;
  }

  ::v-deep .zp-swiper-super{
    background-color: #F4F3F7;
  }

  .go-back{
    width: 750rpx;
    height: 88rpx;
    padding:0 30rpx;
    box-sizing: border-box;
    background-color: #F4F3F7;
    @include flex(row,space-between,center);
    
    image{
      width: 40rpx;
      height: 40rpx;
      margin-right: 30rpx;
    }

    ::v-deep .uni-easyinput{
      width: 616rpx !important;
      height: 64rpx;
    }
    
    ::v-deep .uni-easyinput__content{
      width: 616rpx !important;
      height: 64rpx !important;
      background: white !important;
      border-radius: 32rpx !important;
      backdrop-filter: blur(5px) !important;
    }
    ::v-deep .is-input-border{
      border: none !important;
    }

    ::v-deep .uni-icons{
      color: #D8D8D8 !important;
      font-size: 20px !important;
    }

    text{
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #333333;
      margin-left: 30rpx;
    }
  }
</style>